<template>
  <div class="fixed-table-pagination">
    <ul class="pagination">
      <li v-for="item in PageRanges" @click="Paged(item.Page)" :class="item.Class">
        <a v-text="item.PageText"></a>
      </li>
    </ul>
    <div class="pagination-detail" tag="vue" v-if="records > 0">
      <span class="pagination-info">共{{ PageCount }}页</span>
      <span> 每页
        <span class="btn-group dropup">
          <button type="button" class="btn btn-xs btn-default dropdown-toggle" data-toggle="dropdown">
            <span class="page-size">{{ size }}</span>
            <span class="caret"></span>
          </button>
          <ul class="dropdown-menu" role="menu">
            <li role="menuitem" @click="Paged(1, 10)" :class="size == 10 ? 'active' : ''"><a href="#">10</a></li>
            <li role="menuitem" @click="Paged(1, 20)" :class="size == 20 ? 'active' : ''"><a href="#">20</a></li>
            <li role="menuitem" @click="Paged(1, 30)" :class="size == 30 ? 'active' : ''"><a href="#">30</a></li>
            <li role="menuitem" @click="Paged(1, 50)" :class="size == 50 ? 'active' : ''"><a href="#">50</a></li>
            <li role="menuitem" @click="Paged(1, 100)" :class="size == 100 ? 'active' : ''"><a href="#">100</a></li>
          </ul>
        </span>
        <div class="page-jump">
          <span>到<input type="text" v-model="GoIndex" @keydown.enter="Paged(GoIndex)" />页</span>
          <button type="button" class="btn btn-sm btn-default" @click="Paged(GoIndex)">确定</button>
        </div>
      </span>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    size: {
      type: Number,
      default: 30
    },
    records: {
      twoWay: true,
      type: Number,
      default: 0
    },
    numbers: {
      type: Number,
      default: 5
    },
    tag: {
      type: String
    }
  },
  data() {
    return {
      PageIndex: 1,
      GoIndex: '',
      PageCount: 1,
      PageRanges: []
    };
  },
  computed: {
    starts() {
      return (this.PageIndex - 1) * this.size + 1;
    },
    ends() {
      return this.PageIndex * this.size > this.records ? this.records : this.PageIndex * this.size;
    }
  },
  methods: {
    Paged: function(i, s) {
      if (isNaN(parseInt(i))) {
        this.$Notice.warning({ title: '警告', desc: '页码必须为数字！' });

        return;
      }

      let vpage = parseInt(i);

      if (vpage <= 0 || vpage > this.PageCount) {
        this.$Notice.warning({ title: '警告', desc: `页码必须在${1}~${this.PageCount}范围内！` });

        return;
      }

      this.PageIndex = vpage;
      this.size = s || this.size || 30;

      this.PageChanged();
      this.$emit('change', this, i);
    },
    PageChanged: function() {
      var self = this;
      var count = self.records % self.size == 0 ? parseInt(self.records / self.size) : parseInt(self.records / self.size) + 1;

      this.PageCount = count;
      self.PageRanges.splice(0, self.PageRanges.length);

      if (count > 1 && count <= self.numbers) {
        for (var i = 0; i < count; i++) {
          self.PageRanges.push({ Page: i + 1, PageText: i + 1 + '', Class: self.PageIndex == i + 1 ? 'active' : '' });
        }
      } else if (count > self.numbers) {
        if (self.PageIndex > 1) {
          self.PageRanges.push({ Page: 1, PageText: '首页', Class: '' });
          self.PageRanges.push({ Page: self.PageIndex - 1 < 1 ? 1 : self.PageIndex - 1, PageText: '上一页', Class: '' });
        }

        var beginIndex = 0;
        var endIndex = self.numbers;

        if (self.PageIndex > self.numbers) {
          beginIndex = parseInt(self.PageIndex / self.numbers) * self.numbers;

          if (self.PageIndex % self.numbers == 0) {
            beginIndex = parseInt(self.PageIndex / self.numbers - 1) * self.numbers;
          } else {
            beginIndex = parseInt(self.PageIndex / self.numbers) * self.numbers;
          }

          endIndex = beginIndex + self.numbers;

          if (endIndex > count - self.numbers) {
            beginIndex = count - self.numbers;
          }

          self.PageRanges.push({ Page: beginIndex, PageText: '...', Class: '' });
        }

        for (var i = beginIndex; i < endIndex; i++) {
          if (i >= count) {
            break;
          }

          self.PageRanges.push({ Page: i + 1, PageText: i + 1 + '', Class: self.PageIndex == i + 1 ? 'active' : '' });
        }

        if (endIndex < count) {
          self.PageRanges.push({ Page: endIndex + 1, PageText: '...', Class: '' });
          self.PageRanges.push({ Page: self.PageIndex + 1 > count ? count : self.PageIndex + 1, PageText: '下一页', Class: '' });
          self.PageRanges.push({ Page: count, PageText: '末页', Class: '' });
        }
      }
    }
  },
  watch: {
    records: function(o, n) {
      this.PageIndex = 1;

      this.PageChanged();
    }
  },
  mounted() {
    this.PageChanged();
  }
};
</script>

<style>
.fixed-table-pagination {
  display: flex;
}

.fixed-table-pagination > .pagination {
  margin: 5px 0;
  flex-flow: column;
}

.fixed-table-pagination > .pagination-detail {
  flex-flow: column;
  vertical-align: middle;
  margin-top: 8px;
  margin-left: 0;
  left: 10px;
}

.fixed-table-pagination > .pagination-detail > .pagination-info {
  padding-left: 10px;
}

.fixed-table-pagination > .pagination-detail .btn-group .btn-xs span {
  display: inline-block !important;
}

.fixed-table-pagination > .pagination-detail .page-jump {
  display: inline-block;
  line-height: 32px;
  margin-left: 10px;
}

.fixed-table-pagination > .pagination-detail .page-jump span {
  padding-right: 10px;
}

.fixed-table-pagination > .pagination-detail .page-jump input {
  width: 60px;
  height: 28px;
  text-align: center;
  border: 1px solid #ddd;
  box-shadow: 1px 1px 2px #eee;
  margin: 0 5px;
}
</style>
